@import "../../../../../ng-tools/ng-tools-styles";

.menu-item-group {
  overflow: hidden;
  .menu-item {
    position: relative;
    width: 100%;
    height: pxToRem(50px);
    background-color: inherit;
    cursor: pointer;
    user-select: none;
    .menu-text {
      .fa {
        position: absolute;
        height: 100%;
        width: pxToRem(50px);
        line-height: pxToRem(50px);
        left: 0;
        color: #fff;
        text-align: center;
      }
      display: block;
      width: 100%;
      line-height: pxToRem(50px);
      color: #fff;
      padding-left: pxToRem(50px);
      text-align: left;
      text-decoration: none;
      overflow: hidden;
      border-left: 5px solid transparent;
    }
    &:hover {
      .menu-text, .menu-text .fa {
      }
    }
  }
  &.leaf-node {
    position: relative;
    display: block;
    width: 100%;
    .menu-item {
      height: pxToRem(50px);
      line-height: pxToRem(50px);
      .menu-text {
        .fa {
          position: absolute;
          height: 100%;
          width: pxToRem(50px);
          line-height: pxToRem(50px);
          left: 0;
          color: #fff;
          text-align: center;
        }
        display: inline-block;
        width: 100%;
        height: pxToRem(50px);
        line-height: pxToRem(50px);
        color: #fff;
        font-weight: normal;
        text-align: left;
        padding-left: pxToRem(50px);
        text-decoration: none;
        overflow: hidden;
        border-left: 5px solid transparent;
      }
    }

    &.active > .menu-item {
      background-color: #e7e7e7 !important;
      .menu-text {
        border-left: 5px solid;
      }
      .menu-text, .menu-text .fa {
      }
    }
  }
}
